<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单击左右箭头实现图片滚动效果</title>
<style type="text/css">
body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,img,td,div,input{margin:0;padding:0;}
ul,ol,li{list-style-type:none; line-height:24px;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal}
.hidden{display:none;}
a{outline-style:none;color:#0e0e0e;text-decoration:none;}
a:hover{color:#b21600; text-decoration:none;}
.clear{ clear:both; height:0px; overflow:hidden}
input{ padding-left:2px; font-size:12px}
img{ border:0px;}
.fl{ float:left}
.fr{ float:right}
.mr_div{ width:580px; height:160px; background:#EDEDED; padding:12px 17px 0 13px; margin-bottom:15px}
.mrd_h1{ height:22px; margin-bottom:18px; display:block}
.mrd_h1 .fl{ line-height:22px; color:#4f4f4f; font-size:16px}
.mrd_h1 .fr{ padding-top:9px}
.mrd_nr{ height:103px}
.mrd_bl,.mrd_br{ width:16px; height:27px; position:relative; top:37px; cursor:pointer}
.mrd_pic{ width:528px; height:103px; float:left; overflow:hidden; position:relative; margin-left:17px; display:inline}
.mrd_ul{ position:absolute; left:0px; top:0px}
.mrd_ul li{ width:162px; height:103px; float:left; overflow:hidden; margin-right:14px; display:inline; position:relative}
.mrd_ul li span{ display:block; font-size:12px; font-weight:bold}
.mrd_si{ position:absolute; left:0px; top:0px}
.mrd_si,.mrd_si img{ width:162px; height:103px;}
.mrd_st{ width:162px; height:34px; line-height:34px; position:absolute; left:0px; top:69px; background:#000; text-align:center; opacity:0.8; filter:alpha(opacity=80);}
.mrd_st a,.mrd_st a:hover{ color:#FFF}
.mr_div2 .mrd_st{ background:#CC0000}
.mright { margin: 0px auto; width: 675px; }
</style>
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<div style="background:#FFF; padding:50px;">
<!--效果开始-->
<div class="mright">
  <div class="mr_div">
   <div class="mrd_h1">
    <span class="fl fv">图文特效</span>
    <span class="fr"><a href="#"><img src="images/more.jpg" /></a></span> 
   </div>
   <div class="mrd_nr">
    <div class="fl mrd_bl" onclick="upMove(this);return false">
        <img src="images/but_l.jpg" /></div>
    <div class="mrd_pic">
     <ul class="mrd_ul">
      <li>
       <span class="mrd_si"><a href="" target="_blank">
             <img src="images/120619_pic1.jpg" /></a></span>
       <span class="mrd_st"><a href="" target="_blank">网站建设技巧</a></span>
      </li>
      <li>
       <span class="mrd_si"><a href="" target="_blank">
             <img src="images/120619_pic2.jpg" /></a></span>
       <span class="mrd_st"><a href="" target="_blank">网站优化知识</a></span>
      </li>
      <li>
       <span class="mrd_si"><a href="" target="_blank">
             <img src="images/120619_pic3.jpg" /></a></span>
       <span class="mrd_st"><a href="" target="_blank">网站模板欣赏</a></span>
      </li>
      <li>
       <span class="mrd_si"><a href="" target="_blank">
             <img src="images/120619_pic1.jpg" /></a></span>
       <span class="mrd_st"><a href="" target="_blank">HTML学习</a></span>
      </li>
      <li>
       <span class="mrd_si"><a href="" target="_blank">
             <img src="images/120619_pic2.jpg" /></a></span>
       <span class="mrd_st"><a href="" target="_blank">网页设计教程</a></span>
      </li>
      <li>
       <span class="mrd_si"><a href="" target="_blank">
             <img src="images/120619_pic3.jpg" /></a></span>
       <span class="mrd_st"><a href="" target="_blank">建站技巧</a></span>
      </li>
      <li>
       <span class="mrd_si"><a href="" target="_blank">
             <img src="images/120619_pic1.jpg" /></a></span>
       <span class="mrd_st"><a href="" target="_blank">最新互联网信息</a></span>
      </li>
      <li>
       <span class="mrd_si"><a href="" target="_blank">
             <img src="images/120619_pic2.jpg" border="0" /></a></span>
       <span class="mrd_st"><a href="" target="_blank">网站分析</a></span>
      </li>
     </ul>
    </div>
    <div class="fr mrd_br" onclick="downMove(this);return false">
        <img src="images/but_r.jpg" /></div>
   </div>
  </div>
 </div>
</div>
<script language="javascript">
function upMove(obj){
  var dom = $(obj).next();	
  dom.find("ul").width(dom.find("li").size()*176);
  dom.animate({
   scrollLeft:-176+dom.scrollLeft()	
  },500)
  if(dom.scrollLeft()>0){
	 dom.next().find("img").attr("src","images/but_r2.jpg");
  }
  if(dom.scrollLeft()<352){
	 dom.prev().find("img").attr("src","images/but_l.jpg");	
  }
}
function downMove(obj){
  var dom = $(obj).prev();
  dom.find("ul").width(dom.find("li").size()*176);
  dom.animate({
   scrollLeft:176+dom.scrollLeft()	
	},500)
  if(dom.scrollLeft()>-176){
	  dom.prev().find("img").attr("src","images/but_l2.jpg");	
	}
  if(dom.scrollLeft()>=(dom.find("li").size()*176)-704){
	  dom.next().find("img").attr("src","images/but_r.jpg");
	}
}
//判断是否需要滚动
$(function(){
  for(i=0; i<=$(".mrd_pic").size(); i++){
	  if($(".mrd_pic").eq(i).find("li").size()>4){
		  $(".mrd_pic").eq(i).next().find("img").attr("src","images/but_r2.jpg");
	  }
  }
})
</script>
</body>
</html>